Skip to content

Augment the query bar with a refresh/cancel option, group the Show and Sort options, and add a "locale/UTC" time selection - #3110

Merged
ramonsmits merged 5 commits into
ramon/audit-capability-probefrom
ramon/audit-query-bar
Sep 10, 2026
Merged

Augment the query bar with a refresh/cancel option, group the Show and Sort options, and add a "locale/UTC" time selection#3110
ramonsmits merged 5 commits into
ramon/audit-capability-probefrom
ramon/audit-query-bar

Conversation

@ramonsmits

@ramonsmits ramonsmits commented Sep 7, 2026

Copy link
Copy Markdown
Member

Stacked on:

Reorganizes the All Messages query surface so the whole query is one row and the result-presentation controls sit with the results.

image
  • Show and Sort move to the results line, right of Showing X of Y result(s); the filters panel keeps only the query inputs (search, endpoint, time range)
  • Locale-formatted counts: Showing 100 of 158,736,340 result(s) instead of a nine-digit blob. ResultsCount is shared, so heartbeats and throughput pick this up too
  • Refresh lives in the query bar and doubles as Cancel while a query runs, aborting the query through the store; the abort propagates through ServiceControl and terminates the database-side query. The results line reports took 2.7 s
  • No jumping (from 🐛 Stop the refresh button from jumping when a query is in progress #3117): the action segment has one fixed width for Refresh and Cancel, and no clock in the label. Once a query has run for five seconds the results line says Still running · a narrower time range makes the query lighter, which is what the elapsed time was there to convey
  • Auto-refresh countdown ring inside the refresh button while auto-refresh is armed and idle
  • Interval folded into the button, Grafana style: one split button, refresh/cancel on the left and a compact segment on the right showing the active interval as Off, 5s, 1m, 1h that opens the interval menu. The separate "Auto-Refresh: Every 5 seconds" selector is gone

Review feedback applied: the countdown is exposed to assistive tech as text. The ring is decorative (aria-hidden); a visually hidden role="timer" "Next auto refresh in N seconds" describes the button, so the button keeps the stable name "Refresh" and nothing is announced on every tick.

Show (page size) and Sort are result-presentation controls, not query
filters — they now sit right of 'Showing X of Y result(s)' instead of
competing with the query inputs for space in the filters panel, which
also removes their awkward wrapping. The filters panel keeps the query
inputs only (search, endpoint, time range), left-aligned; the rule that
pushed the last filter to the far right is gone.
Large audit stores easily reach nine-digit totals; 'Showing 100 of
158736340 result(s)' is unreadable. Both numbers now go through
Intl.NumberFormat with the user's locale (158,736,340 / 158.736.340).
ResultsCount is shared, so the heartbeats views and the throughput
queue list pick this up as well.
The refresh cluster occupied its own row above the filters; it now sits
right-aligned inside the query bar so the whole query surface is one
row. While a query is in flight the button flips from Refresh to an
enabled Cancel that aborts the running query through the store; the
abort propagates through ServiceControl and terminates the
database-side query. Once results land, the results line reports what
they cost: "Showing 100 of 158,736,340 result(s) · took 2.7 s". The
timing is forgotten with the results when the view is left.

ActionButton hard-coupled loading to disabled, which would have left
the button dead exactly when a user most wants an escape hatch; it
gains disableOnLoading (default true, existing uses unchanged) and the
refresh/cancel button opts out. The spec stubs ActionButton with the
real disabled semantics so that coupling can't silently return.
… screen readers

While auto-refresh is armed and no query runs, the refresh arrow is
replaced by a small ring that depletes toward the next refresh, with
the remaining seconds as its tooltip; during a query the button shows
the usual spinner. The ring mirrors FontAwesome's icon geometry:
ActionButton gains a named icon slot so custom icons are flex children
with the same centering as FAIcon. Reduced motion disables the
animation.

The ring is purely decorative (aria-hidden). The countdown reaches
assistive tech as a visually hidden "Next auto refresh in N seconds"
timer that describes the button, read together with it rather than
announced on every tick; the button keeps its stable name "Refresh".
The wording test runs on a frozen clock so the 250 ms ticker cannot
race it.
…nstead of a clock

The refresh control is one split button: the refresh/cancel action on
the left with a fixed width for both states, and a compact segment on
the right showing the active interval as "Off", "5s", "1m", "1h" that
opens the interval menu. The separate "Auto-Refresh: Every 5 seconds"
selector is gone, which frees a good part of the query bar; the menu
spells each interval out and the segment carries the full wording as
its accessible name.

The elapsed-time clock in the Cancel label is gone (it changed the
button's width on every tick). What it was there to convey is now said
in words: once a query has been running for five seconds the results
line shows "Still running · a narrower time range makes the query
lighter" on its own line under the result stats, and drops it when the
query ends. Show, Sort and Times are pinned to the right of that line
and never wrap.
@ramonsmits
ramonsmits force-pushed the ramon/audit-query-bar branch from 9260224 to 8979e08 Compare September 10, 2026 08:58
@ramonsmits
ramonsmits merged commit ca79186 into master Sep 10, 2026
9 checks passed
@ramonsmits
ramonsmits deleted the ramon/audit-query-bar branch September 10, 2026 09:55
@ramonsmits ramonsmits changed the title Query bar with refresh/cancel and a results line with Show, Sort and locale counts Augment the query bar with a refresh/cancel option, group the Show and Sort options, and add a "locale/UTC" time selection Sep 10, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Improvement Improvement

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants